<template>
  <view class="container">
    <view class="title">学生姓名 近7次成绩变化</view>
    <!-- 等级 -->
    <view class="leavel">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">成绩等级说明</view>
      <!-- 分段 -->
      <view class="grades">
        <view class="common" style="background: #ffa119; border-radius: 100rpx 0 0 100rpx">{{ maxgrades - 20 + '-' + maxgrades }}</view>
        <view class="common" style="background: #ffa119">{{ maxgrades - 40 + '-' + (maxgrades - 20) }}</view>
        <view class="common" style="background: #ffc685">{{ maxgrades - 60 + '-' + (maxgrades - 40) }}</view>
        <view class="common" style="background: #ffedd9; border-radius: 0rpx 100rpx 100rpx 0rpx">
          {{ maxgrades == 100 ? '0' + '-' + 40 : maxgrades - 80 + '-' + (maxgrades - 60) }}
        </view>
      </view>
      <!--  -->
      <!-- 等级 -->
      <view style="display: flex; box-sizing: border-box">
        <view class="dengji">A级</view>
        <view class="dengji">B级</view>
        <view class="dengji">C级</view>
        <view class="dengji">D级</view>
      </view>
    </view>
    <!-- 图表 -->
    <uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec"></uni-ec-canvas>
    <view>
      <view class=""></view>
    </view>
  </view>
</template>

<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue';
import * as echarts from '@/components/uni-ec-canvas/echarts.min.js';
let chart = null;
export default {
  components: {
    uniEcCanvas
  },
  data() {
    return {
      ec: {
        lazyLoad: true
      },
      time: [],
      grades: [],
      maxgrades: '',
      option: {
        xAxis: {
          axisTick: {
            show: false // 设置为true显示刻度线
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: 45 // 旋转角度
          },
          type: 'category',
          data: ['2024-2-12', '2024-2-14', '2024-2-18', '2024-2-13', '2024-2-14', '2024-2-15', ' 2024-2-15']
        },
        yAxis: {
          axisLine: {
            show: true
          },
          type: 'value'
        },
        series: [
          {
            data: [250, 130, 24, 128, 315, 317, 110],
            type: 'line',
            smooth: true,
            symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
            symbolSize: 10, //小圆点的大小
            itemStyle: {
              color: '#3553E8'
            },
            lineStyle: {
              color: 'black'
            }
          }
        ]
      }
    };
  },
  methods: {
    // 获取学成绩
    getgrades(id) {
      uni.$http
        .post('/resultinput/check', {
          user_id: id,
          type: '2'
        })
        .then((res) => {
          console.log('成绩', res);
          res.data.data.list.forEach((item) => {
            this.time.push(item.exam_data);
            this.grades.push(item.exam_score);
          });
          console.log(this.grades);
          this.maxgrades = Math.max(...this.grades);
          if (this.maxgrades <= 100) {
            this.maxgrades = 100;
          } else if (this.maxgrades >= 0 && this.maxgrades <= 120) {
            this.maxgrades = 120;
          } else if (this.maxgrades >= 120) {
            this.maxgrades = 150;
          }
          console.log(this.maxgrades);
          this.option.xAxis.data = this.time;
          this.option.series[0].data = this.grades;
          chart.setOption(this.option);
        });
    },
    initChart(canvas, width, height, canvasDpr) {
      console.log(canvas, width, height, canvasDpr);
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr
      });
      canvas.setChart(chart);
      chart.setOption(this.option);
      return chart;
    }
  },
  onLoad(e) {
    // 获取学生id
    if (e.id) {
      console.log(e.id);
      this.getgrades(e.id);
    }
    setTimeout(() => {
      console.log(this.$refs);
    }, 2000);
    this.$refs.canvas.init(this.initChart);
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #222222;
    margin: 30rpx;
  }
  .leavel {
    box-sizing: border-box;
    width: 682rpx;
    height: 198rpx;
    margin: 20rpx 30rpx;
    padding: 20rpx;
    background: #f5f7ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .grades {
      box-sizing: border-box;
      display: flex;
      width: 632rpx;
      height: 28rpx;
      margin: 20rpx;
      .common {
        box-sizing: border-box;
        width: 158rpx;
        height: 28rpx;
        text-align: center;
        line-height: 28rpx;
        font-size: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #222222;
      }
    }
    .dengji {
      width: 25%;
      text-align: center;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
  }
  .uni-ec-canvas {
    box-sizing: border-box;
    width: 100%;
    height: 500rpx;
    display: block;
    margin-top: 30rpx;
  }
}
</style>
